<template>
	<div class="main-container">
		<Layout>
			<Layout>
				<Sider  style="height: 100vh;overflow-y: auto;width: 400px;max-width: 400px;flex: 0 0 300px">
				 <Row>
				        <Col span="12" >
							<theNav @on-change="navhange">
								<div class="logo-nav">
									<Icon type="logo-html5"  color='#ffffff' />
								</div>
							</theNav>
						</Col>
				        <Col span="12" style="background: #ffffff;height: 100vh;overflow-y: auto;">
							<theSubnav>
							
							</theSubnav>
						</Col>
				    </Row>
						
				</Sider>
				<Content>
					<Card class="app-container">
						<router-view />
					</Card>
				</Content>
			</Layout>
		</Layout>
	</div>
</template>

<script>
	import theNav from "c/nav/index.vue"
	import theSubnav from "c/nav/subnav.vue"
	export default {
		components: {
			theNav,
			theSubnav
		},
		data: () => ({}),
		methods: {
			navhange(d){
				this.navname=d
			},
		},
		computed: {},
		watch: {},
		created() {},
		beforeMount() {},
		mounted() {},
		updated() {},
		beforeDestroy() {

		},
		destroyed() {

		}
	};
</script>

<style>
	.main-container {
		width: 100%;
	}
	.logo-nav{
		font-size: 40px;
		height: 64px;
		text-align: center;
	}
</style>
